<template>
  <el-form ref="userForm" :model="form" :rules="rules">
    <el-form-item :label="$t('user.username')" prop="username">
      <el-input
        v-model="form.username"
        :disabled="!isSuperman"
        @blur="trim('username')"
        @mouseout.native="blurRule($event)"
      />
    </el-form-item>
    <el-form-item v-if="isSuperman" :label="$t('login.bindingAccount')">
      <el-input
        v-model="form.userId"
        readonly
        @focus="employeeChooseVisible = true"
        @blur="trim('userId')"
        @mouseout.native="blurRule($event)"
      />
    </el-form-item>
    <el-form-item v-if="isSuperman">
      <el-button type="primary" @click="modifyUser">{{ $t('common.modify') }}</el-button>
    </el-form-item>
    <el-dialog
      :title="$t('settings.selectPeople')"
      :visible.sync="employeeChooseVisible"
      width="800px"
      top="10vh"
      class="dialog-people-reset"
    >
      <employee-choose-single
        @confirm="confirmSelect"
        @cancel="cancelSelect"
        @chooseLeader="chooseEmployee"
      />
    </el-dialog>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex';
import { mapActions } from 'vuex';
import userApi from '@/api/user';
import EmployeeChooseSingle from '@/components/employee-form-leader';
import { trim } from '@/utils/';

export default {
  components: { EmployeeChooseSingle },
  data() {
    return {
      employeeChooseVisible: false,
      form: {
        username: 'admin',
        role: 'ROLE_SUPERMAN',
        customRoleId: '',
        userId: null,
      },
    };
  },
  computed: {
    ...mapGetters(['isSuperman', 'user', 'id', 'name']),
    rules() {
      return {
        username: [{ required: true, message: this.$t('user.enterUsername'), trigger: 'blur' }],
      };
    },
  },
  created() {
    this.setInfo();
  },
  methods: {
    ...mapActions('user', [
      'getInfo',
    ]),
    modifyUser() {
      this.$refs['userForm'].validate(async valid => {
        if (valid) {
          await userApi.saveUser(this.form, this.type, this.id);
          this.$message({
            message: this.$t('user.saveUserSuccess'),
            type: 'success',
          });
          this.getInfo();
        }
      });
    },
    /**
     * 确定
     * @param {JSON} user 选择人员单条信息
     */
    confirmSelect(user) {
      this.employeeChooseVisible = false;
      this.form.userId = user.userID;
    },
    /**
     * 取消选择人员
     */
    cancelSelect() {
      this.employeeChooseVisible = false;
    },
    /**
     * 选择人员
     * @param {JSON} user 人员相关数据信息
     */
    chooseEmployee(user) {
      this.employeeChooseVisible = false;
      this.form.userId = user.id;
    },
    /**
     * 设置用户信息
     **/
    setInfo() {
      this.form = {
        username: this.name,
        role: 'ROLE_SUPERMAN',
        customRoleId: '',
        userId: this.user,
      };
    },
    /**
     * 获取用户信息
     **/
    async getInfo() {
      await this.getInfo();
      this.setInfo();
    },
    /**
     * 关闭创建/编辑用户 恢复类型
     **/
    userDialog() {
      this.type = 'createUser';
    },
    /**
     * 去除两端空格处理
     * @param {String} name 输入框名称
     */
    trim(name) {
      this.form[name] = trim(this.form[name]);
    },
    /**
     * 失去焦点
     * @param {DOMEvent} event 当前输入框
     */
    blurRule(event) {
      // 输入框失去焦点操作
      event.target.blur();
    },
  },
};
</script>
